import React, { Component } from 'react';
import { Button, Tab, NavBarItem } from 'react-weui';
import 'weui';
import 'react-weui/build/packages/react-weui.css';
import Swiper from 'swiper/dist/js/swiper.js';
import 'swiper/dist/css/swiper.min.css';
import axios from 'axios';
import './forecast.css';
import './../global';

class Forecast extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slideDom: [],
      tab: 1
    }
  }
  componentDidMount() {
    const self = this;
    axios.get(global.constants.cmsUrl + 'carousel/list')
      .then(function (response) {
        if (response.status === 200) {
          self.setState({
            slideDom: response.data
          });
        }
      })
      .catch(function (error) {
        console.log(error);
      })
  }
  componentDidUpdate() {
    new Swiper('.swiper-container', {
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
      },
      loop: true
    })
  }
  // 轮播图detail页
  titlePage(id) {
    this.props.history.push({ pathname: '/Farticle', state: { id: id } })
  }
  render() {
    return (
      <div className="forecast">
        <div className="banner">
          <div className="swiper-container">
            <div className="swiper-wrapper">
              {this.state.slideDom.map((item, index) => <div className={`swiper-slide img` + index} key={index} style={{ backgroundImage: `url(${item.imgUrl})` }} onClick={this.titlePage.bind(this, item.id)}></div>)}
            </div>
            <div className="swiper-pagination"></div>
          </div>
        </div>
        <div className="content">
          <Tab type="navbar">
            <NavBarItem label="宏观预测" active={this.state.tab === 0} onClick={e=>this.setState({tab:0})}>
              <Button>宏观预测</Button>
            </NavBarItem>
            <NavBarItem label="行业预测" active={this.state.tab === 1} onClick={e=>this.setState({tab:1})}>
              <Button type="warn">行业预测</Button>
            </NavBarItem>
          </Tab>
        </div>
      </div>
    );
  }
}

export default Forecast;